<template>
	<div class="box-container" v-loading="sLoading">
		<div class="addBoxTop">
			<span class="font_size20">拼团优惠</span>
		</div>
		<div class="box-content">
			<h2 class="mb5"> 基础信息 </h2>
			<div class="basc-info">
				<Descriptions :column="3" title="">
					<el-descriptions-item label="活动标题">
						<div class="ellipsis2" :title="objectForm.title || '--'">{{ objectForm.title || '--' }}</div>
					</el-descriptions-item>
					<el-descriptions-item label="使用云店">
						<div class="ellipsis2" :title="objectForm.shop_name || '--'">{{ objectForm.shop_name || '--' }}
						</div>
					</el-descriptions-item>
					<el-descriptions-item label="标题开关">
						{{ objectForm.title_is == 1 ? '关闭' : '开启' }}
					</el-descriptions-item>
					<el-descriptions-item label="成团人数">{{ objectForm.num_ok || '--' }}人</el-descriptions-item>
					<el-descriptions-item label="活动时效">
						{{ formatDateRange(objectForm.time_from_txt, objectForm.time_to_txt) }}
					</el-descriptions-item>
					<el-descriptions-item label="活动描述">
						<div class="ellipsis2" :title="objectForm.desc || '--'">{{ objectForm.desc || '--' }}
						</div>
					</el-descriptions-item>
					<el-descriptions-item label="活动说明" :span="2">
						<div class="ellipsis2" :title="objectForm.txt_info || '--'">{{ objectForm.txt_info || '--' }}
						</div>
					</el-descriptions-item>
				</Descriptions>
				<div class="active-box">
					<div class="mb-box flex_row">
						<div class="title font_black7">活动规则：</div>
						<div class="font_size14">{{ objectForm.txt_rule || '--' }}</div>
					</div>
					<div class="mb-box flex_row">
						<div class="flex_row">
							<div class="title font_black7">广告背景：</div>
							<PickerModel :showTitle="false" :mode="pickerMode" :photoList="photoList"
								:color="selectedColor" :imgLimit="2" :isUpload="false" :pickerDisabled="true" />
						</div>
						<div class="flex_row ml50">
							<div class="title font_black7">风格颜色：</div>
							<div class="flex_center_column">
								<div class="background-item" :style="{
									backgroundColor: `#${objectForm.tpl_color1 || 'ffffff'}`,
								}"></div>
								<div class="ml5 font_size12 font_black7">（{{ objectForm.tpl_color1 ? '#' +
									objectForm.tpl_color1 : '#ffffff' }}）
								</div>
							</div>
						</div>
						<div class="flex_row ml50">
							<div class="title font_black7">背景音乐：</div>
							<div class="font_size14">{{ getMusicName(objectForm.music) }}</div>
						</div>
					</div>
					<div class="mb-box flex_row mt10">
						<div class="flex_row">
							<div class="title font_black7">排列方式：</div>
							<TplOrsort :tpl_ls="objectForm.tpl_ls" :tplShow="true" :disabled="true" />
						</div>
						<div class="flex_row ml50">
							<div class="title font_black7">排序方式：</div>
							<TplOrsort :sort_type="objectForm.sort_type" :sortShow="true" :disabled="true" />
						</div>
					</div>
				</div>
			</div>
			<template
				v-if="objectForm.gd_ls && objectForm.gd_ls.length > 0 || objectForm.gd_ls2 && objectForm.gd_ls2.length > 0">
				<h2 class="mb5 mt10"> 参与活动商品/项目 </h2>
				<div class="good-card-box" v-if="objectForm.gd_ls && objectForm.gd_ls.length > 0">
					<div class="total-summary-box" v-if="objectForm.gd_ls && objectForm.gd_ls.length > 0">
						<h2 class="mr20"> 商品 </h2>
						<div class="total-item">
							<span class="total-label">累计金额</span>
							<span class="total-amount">￥{{ totalPrice.toFixed(2) }}</span>
						</div>
						<div class="total-divider"></div>
						<div class="total-item">
							<span class="total-label">合计数量</span>
							<span class="total-quantity">{{ totalNumber }}</span>
						</div>
					</div>
					<div style="padding: 0 12px;" v-for="(item, index) in objectForm.gd_ls"
						:key="`goods-${item.id || index}`">
						<MarketGoodsCard :gdInfo="item" />
					</div>
				</div>
				<div class="good-card-box mt10" v-if="objectForm.gd_ls2 && objectForm.gd_ls2.length > 0">
					<div class="total-summary-box" v-if="objectForm.gd_ls2 && objectForm.gd_ls2.length > 0">
						<h2 class="mr20"> 项目 </h2>
						<div class="total-item">
							<span class="total-label">累计金额</span>
							<span class="total-amount">￥{{ total2Price.toFixed(2) }}</span>
						</div>
						<div class="total-divider"></div>
						<div class="total-item">
							<span class="total-label">合计数量</span>
							<span class="total-quantity">{{ total2Number }}</span>
						</div>
					</div>
					<div style="padding: 0 12px;" v-for="(item, index) in objectForm.gd_ls2"
						:key="`project-${item.id || index}`">
						<MarketGoodsCard :gdInfo="item" />
					</div>
				</div>
			</template>
			<div style="height: 50px;"></div>
		</div>
		<div class="footer-content" v-if="operations.length > 0">
			<footer-bottom :operations="operations" @operation="handleOperation" />
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance, watch, computed, nextTick } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import { activityDict } from '@/utils/dict.js'
import Descriptions from "@/components/commV2/Description/descriptions.vue"
import empty from "@/components/comm/empty.vue";
import FooterBottom from "@/components/commV2/FooterBottom/index.vue";
import MarketGoodsCard from "@/components/commV2/marketGoodsCard/index.vue";
import TplOrsort from "@/components/commV2/tplOrsort/index.vue";
import PickerModel from '@/components/commV2/pickerModel/index.vue'

// 获取当前组件实例
const { proxy } = getCurrentInstance()

const props = defineProps({
	detailID: {
		type: String,
		default: "",
	},
	box_index_key: {
		type: [String, Number],
		default: "",
	},
})

const emit = defineEmits(['editStopTpBmFun'])
const sLoading = ref(false)
const objectForm = ref({})
const pickerMode = ref(1) // 设置默认值
const photoList = ref([])
const selectedColor = ref('#409EFF') // 设置默认值

const totalPrice = computed(() => {
	return objectForm.value.gd_ls.reduce((sum, item) => sum + Number(item.price) * Number(item.number), 0)
})
const totalNumber = computed(() => {
	return objectForm.value.gd_ls.reduce((sum, item) => sum + Number(item.number), 0)
})
const total2Price = computed(() => {
	return objectForm.value.gd_ls2.reduce((sum, item) => sum + Number(item.price) * Number(item.number), 0)
})
const total2Number = computed(() => {
	return objectForm.value.gd_ls2.reduce((sum, item) => sum + Number(item.number), 0)
})

// 音乐列表
const musicList = ref([])
// 格式化日期范围
const formatDateRange = (startDate, endDate) => {
	if (!startDate || !endDate) return '--'
	return `${startDate} 至 ${endDate}`
}

// 获取音乐名称
const getMusicName = (musicObj) => {
	if (!musicObj || !musicList.value.length) return '--'
	const music = musicList.value.find(item => item.id == musicObj.id)
	return music ? music.title : '--'
}

// 获取音乐列表
const getMusicList = async () => {
	try {
		let res = await proxy.$api({ url: config.YX_PIN_MUSIC_LS, data: {} })
		if (res.status == 1 && res.data.music_ls) {
			musicList.value = res.data.music_ls
		}
	} catch (error) { }
}

// 状态 1未开始  2进行中  3已失效  7已删除
const operations = computed(() => {
	return objectForm.value.status == 1 ? [
		{ text: '编辑', type: 'edt', class: 'primary' }
	] : objectForm.value.status == 2 ? [
		{ text: '停止', type: 'stop', class: 'danger' },
	] : []
})

const editTpBmFun = (type, status = props.box_index_key) => {
	emit('editStopTpBmFun', {
		type: type,
		status: status,
		id: props.detailID
	})
}

const handleOperation = (type) => {
	switch (type) {
		case 'edt':
			editTpBmFun('edt', 2)
			break;
		case 'stop':
			stopFun('stop')
			break;
	}
};

const stopFun = (type) => {
	proxy.$confirm("确定要停止该活动?", "温馨提醒", {
		confirmButtonText: "停止",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => {
			let param = {
				act: type,
				id: props.detailID,
				status: 3,
			}
			proxy.$api({ url: config.YX_PIN_EVENT_SAVE, data: param }).then(res => {
				if (res.status == 1) {
					proxy.$message.success('停止成功')
					editTpBmFun(type, 3)
					objectForm.value.status = 3
				}
			})
		})
		.catch(() => { });
}

// 获取活动详情
const getEventInfo = async () => {
	let param = {
		id: props.detailID,
	}
	try {
		let res = await proxy.$api({ url: config.YX_PIN_EVENT_INFO, data: param })
		let result = res.data
		if (res.status == 1 && result) {
			objectForm.value = {
				...result,
			}
			if (result?.tpl_ad && result.tpl_ad.length > 0) {
				// 如果有图片数据，则设置为图片模式
				if (!result.tpl_ad[0]?.obj_color) {
					photoList.value = result.tpl_ad.map(item => ({
						obj_type: item?.obj_type,
						name: item?.obj_img_rel,
						url: item?.obj_img,
						id: item?.obj_id
					}))
				} else {
					// 如果有颜色数据，设置为颜色模式
					selectedColor.value = `#${result.tpl_ad[0]?.obj_color || 'ffffff'}`
				}
			} else {
				// 如果没有数据，清空photoList
				photoList.value = []
			}
			pickerMode.value = result?.tpl_ad && result?.tpl_ad[0]?.obj_color ? 2 : 1;
		}
	} catch (error) { }
}

const detailsId = ref("")
watch(() => props.detailID, (newVal) => {
	setTimeout(() => {
		if (newVal) {
			detailsId.value = newVal
			getEventInfo()
		}
	}, 200)
}, { deep: true, immediate: true })

onMounted(() => {
	getMusicList() // 获取背景音乐列表
})

defineExpose({})

</script>

<style lang="scss" scoped>
.box-container {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.box-content {
	padding-right: 10px;
	flex: 1;
	overflow: hidden;
	overflow-y: auto;
}

.addBoxTop {
	width: 100%;
	height: 40px;
	border-bottom: 2px solid #E4E7ED;
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.basc-info {
	background: #ffffff;
	padding: 14px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border: 1px solid #e2e8f0;
	position: relative;
}

::v-deep .el-descriptions__body {
	background-color: transparent !important;
}

::v-deep .el-descriptions-item__label {
	color: #6b7280 !important;
	font-weight: 500;
	font-size: 14px;
}

::v-deep .el-descriptions-item__content {
	color: #111827 !important;
	font-weight: 400;
}

.time-slots {
	span {
		color: #3b82f6;
		background: #eff6ff;
		padding: 2px 8px;
		border-radius: 12px;
		font-size: 12px;
		display: inline-block;
		margin: 2px 3px;
		border: 1px solid #dbeafe;
	}
}

.text-content {
	max-width: 300px;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.card_box {
	::v-deep .el-card__body {
		padding: 10px !important;
	}
}


.card_box {
	::v-deep .el-col {
		margin-bottom: 12px !important;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

.poster-container {
	position: relative;
}

.active-box .title {
	font-weight: 500;
	font-size: 14px;
}

.mb-box {
	margin-bottom: 12px;
	padding: 12px;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;

	&:hover {
		background: #f1f5f9;
		border-color: #cbd5e1;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	&:last-child {
		margin-bottom: 0;
	}
}

.mb-2box {
	margin-bottom: 12px;
	padding: 12px;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;

	&:last-child {
		margin-bottom: 0;
	}
}

.active-box ::v-deep .el-radio-group {
	height: auto !important;
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.active-box ::v-deep .el-radio__label {
	display: none;
}

.active-box ::v-deep .el-radio__input.is-checked .el-radio__inner {
	background-color: #3b82f6;
	border-color: #3b82f6;
}

.active-box .color-box {
	display: flex;
	font-size: 14px;
	gap: 8px;
	flex-wrap: wrap;

	.color-row {
		box-sizing: border-box;
		text-align: center;
		cursor: pointer;
		transition: all 0.2s ease;
		padding: 6px 10px;
		width: 80px;
		border-radius: 8px;
		background: #ffffff;
		border: 1px solid #e2e8f0;

		&:hover {
			border-color: #3b82f6;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
			transform: translateY(-1px);
		}

		.color-title {
			font-size: 12px;
			color: #6b7280;
			font-weight: 500;
			margin-top: 3px;
		}
	}
}

.background-item {
	width: 60px;
	height: 20px;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.ml50 {
	margin-left: 50px;
}

.good-card-box {
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.total-summary-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 6px 14px;
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	border-bottom: 1px solid #e2e8f0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.total-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.total-label {
	font-size: 14px;
	color: #64748b;
	font-weight: 500;
}

.total-amount {
	font-size: 18px;
	font-weight: 700;
	color: #e11d48;
	text-shadow: 0 1px 2px rgba(225, 29, 72, 0.1);
}

.total-quantity {
	font-size: 16px;
	font-weight: 600;
	color: #0f172a;
}

.total-divider {
	width: 1px;
	height: 24px;
	background-color: #cbd5e1;
	margin: 0 24px;
}

.footer-content {
	height: 60px;
}
</style>